<script lang="ts">
  import { onMount } from "svelte";
  import { scaleLinear } from "d3-scale";

  const color = scaleLinear<string, number>()
    .domain([0, 100])
    .range(["#fde047", "#dc2626"]);
  export let value: number = 0;
  export let label: string = "";
  const totalHeight = 1500;

  import { tweened } from "svelte/motion";
  import { cubicInOut } from "svelte/easing";

  const height = tweened(0, {
    duration: 4000,
    easing: cubicInOut,
  });

  const innerValue = tweened(0, {
    duration: 4000,
    easing: cubicInOut,
  });

  onMount(() => {
    height.set((+value / 100) * totalHeight);
    innerValue.set(+value);
  });
</script>

<svg
  width="100%"
  height="100%"
  viewBox="0 0 791 2051"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    stroke="#142A68"
    stroke-opacity="0.8"
    stroke-width="12"
    d="M788 1660C788 1679.12 777.585 1697.7 757.939 1714.97C738.299 1732.22 709.706 1747.9 674.116 1761.13C602.957 1787.58 504.452 1804 395.5 1804C286.548 1804 188.043 1787.58 116.884 1761.13C81.2939 1747.9 52.7012 1732.22 33.0606 1714.97C13.415 1697.7 3 1679.12 3 1660C3 1640.88 13.415 1622.3 33.0606 1605.03C52.7012 1587.78 81.2939 1572.1 116.884 1558.87C188.043 1532.42 286.548 1516 395.5 1516C504.452 1516 602.957 1532.42 674.116 1558.87C709.706 1572.1 738.299 1587.78 757.939 1605.03C777.585 1622.3 788 1640.88 788 1660Z"
  />
  <path
    stroke="#132763"
    stroke-width="30"
    d="M670 1623.5C670 1635.78 663.669 1648.34 650.368 1660.64C637.058 1672.95 617.358 1684.4 592.343 1694.18C542.363 1713.73 472.771 1726 395.5 1726C318.229 1726 248.637 1713.73 198.657 1694.18C173.642 1684.4 153.942 1672.95 140.632 1660.64C127.331 1648.34 121 1635.78 121 1623.5C121 1611.22 127.331 1598.66 140.632 1586.36C153.942 1574.05 173.642 1562.6 198.657 1552.82C248.637 1533.27 318.229 1521 395.5 1521C472.771 1521 542.363 1533.27 592.343 1552.82C617.358 1562.6 637.058 1574.05 650.368 1586.36C663.669 1598.66 670 1611.22 670 1623.5Z"
  />
  <rect
    x="156"
    y="80"
    width="481"
    height="1500"
    fill="#1A3B93"
    fill-opacity="0.8"
  />
  <rect
    x="156"
    y={77 + (totalHeight - $height)}
    width="481"
    height={$height}
    fill={String(color(value))}
  />
  <ellipse cx="396" cy="1580" rx="240" ry="80" fill={String(color(value))} />
  <ellipse cx="396" cy="80" rx="240" ry="80" fill="#516BB3" />
  <path
    stroke="#B8BAEB"
    stroke-width="4"
    d="M635 80C635 90.1684 628.806 100.175 616.864 109.568C604.944 118.942 587.573 127.471 565.928 134.671C522.659 149.064 462.757 158 396.5 158C330.243 158 270.341 149.064 227.072 134.671C205.427 127.471 188.056 118.942 176.136 109.568C164.194 100.175 158 90.1684 158 80C158 69.8316 164.194 59.8246 176.136 50.4325C188.056 41.0584 205.427 32.5291 227.072 25.3292C270.341 10.9364 330.243 2 396.5 2C462.757 2 522.659 10.9364 565.928 25.3292C587.573 32.5291 604.944 41.0584 616.864 50.4325C628.806 59.8246 635 69.8316 635 80Z"
  />
  <path
    stroke="#B8BAEB"
    stroke-width="2"
    d="M551 77C551 82.1135 547.04 87.2462 539.213 92.1097C531.44 96.9399 520.125 101.326 506.054 105.024C477.929 112.416 439.018 117 396 117C352.982 117 314.071 112.416 285.946 105.024C271.875 101.326 260.56 96.9399 252.787 92.1097C244.96 87.2462 241 82.1135 241 77C241 71.8865 244.96 66.7538 252.787 61.8903C260.56 57.0601 271.875 52.6738 285.946 48.9758C314.071 41.5837 352.982 37 396 37C439.018 37 477.929 41.5837 506.054 48.9758C520.125 52.6738 531.44 57.0601 539.213 61.8903C547.04 66.7538 551 71.8865 551 77Z"
  />
  <path
    stroke="#B8BAEB"
    stroke-width="2"
    d="M477 80C477 80.9937 476.562 82.0464 475.56 83.1605C474.553 84.2805 473.021 85.4088 470.964 86.515C466.853 88.7266 460.839 90.7494 453.322 92.46C438.303 95.8773 417.506 98 394.5 98C371.494 98 350.697 95.8773 335.678 92.46C328.161 90.7494 322.147 88.7266 318.036 86.515C315.979 85.4088 314.447 84.2805 313.44 83.1605C312.438 82.0464 312 80.9937 312 80C312 79.0063 312.438 77.9536 313.44 76.8395C314.447 75.7195 315.979 74.5912 318.036 73.485C322.147 71.2734 328.161 69.2506 335.678 67.54C350.697 64.1227 371.494 62 394.5 62C417.506 62 438.303 64.1227 453.322 67.54C460.839 69.2506 466.853 71.2734 470.964 73.485C473.021 74.5912 474.553 75.7195 475.56 76.8395C476.562 77.9536 477 79.0063 477 80Z"
  />
  <ellipse
    cx="396"
    cy={77 + (totalHeight - $height)}
    rx="240"
    ry="80"
    fill="#b45309"
  />
  <text
    x="395"
    y={totalHeight - $height}
    fill="#ffffff"
    text-anchor="middle"
    dominant-baseline="central"
  >
    <tspan font-size="180px">{Math.floor($innerValue)}台</tspan>
  </text>
  <rect x="69" y="1870" width="655" height="231" rx="40" fill="#1469B8" />
  <text
    x="395"
    y="1984"
    fill="#ffffff"
    text-anchor="middle"
    dominant-baseline="central"
  >
    <tspan font-size="120px">{label}</tspan>
  </text>
</svg>
